  // pages/music/music.js

  // 获取小程序全局实例
  const app = getApp()
  // 创建微信内部音频上下文对象
  var innerAudioContext = wx.createInnerAudioContext()
  // 播放状态标志
  var playing = false
  // 可移动区域宽度(进度条背景宽度)
  var areaWidth
  // 可移动视图宽度(进度滑块宽度)
  var viewWidth
  // 最后播放时间记录
  var lastTime
  // 旋转角度(用于唱片旋转效果)
  let rotate = 0;

  Page({

    /**
     * 页面的初始数据
     */
    data: {
      voice: {
        playing: false,  // 是否正在播放
        canPlay: false,  // 是否可以播放
        time: {},        // 当前播放时间对象
        tip: "",         // 状态提示文字
        src: "https://webfs.kugou.com/202505071011/f4817bba66cf658de4827e22af5aef9d/v3/acd27a452fe3d0348d38540762da7beb/yp/p_0_960131/ap1014_us2164293008_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx32139055_s2789610981.mp3 ",  // 音频文件地址
        poster: 'https://imgessl.kugou.com/stdmusic/20250221/20250221180802208609.jpg',  // 专辑封面
        margin: 0        // 进度滑块左边距
      }
    },

/**
 * 生命周期函数——监听页面加载
 */
onLoad: function() {
  // 保存当前页面this引用
  var that = this

  // 初始化进度条区域和滑块宽度
  if (areaWidth === undefined || areaWidth == null || viewWidth === undefined || viewWidth == null) {
    // 创建节点查询器
    var query = wx.createSelectorQuery();

    // 延迟执行确保DOM渲染完成
    setTimeout(function() {
      // 查询可移动区域宽度
      query.select('#movable-area').boundingClientRect(function(rect) {
        areaWidth = rect.width;
        console.log("可移动区域宽度------->", areaWidth)
      }).exec()

      // 查询可移动视图宽度
      query.select('#movable-view').boundingClientRect(function(rect) {
      viewWidth = rect.width;
      console.log("可移动视图宽度------->", viewWidth)
    }).exec()
  }, 1000)
}

// 初始化音频上下文
innerAudioContext = wx.createInnerAudioContext();
// 设置音频源
innerAudioContext.src = that.data.voice.src;
console.log("音频源地址-->", that.data.voice.src)
// 设置是否遵循系统静音开关
innerAudioContext.obeyMuteSwitch = false
// 设置是否自动播放
innerAudioContext.autoplay = false

/** 
 *音频事件监听
 */

// 播放开始事件
innerAudioContext.onPlay(() => {
  console.log('开始播放');
  playing = true;
  that.data.voice.tip = "正在播放";
  that.data.voice.playing = true;
  that.data.voice.canPlay = true;
  that.setData({
    voice: that.data.voice
  })
})

// 播放停止事件
innerAudioContext.onStop(() => {
  console.log('停止播放');
  playing = false;
  that.data.voice.tip = "已停止";
  that.data.voice.playing = false;
  that.setData({
    voice: that.data.voice
  })
})

// 播放暂停事件
innerAudioContext.onPause(() => {
  console.log('暂停播放');
  playing = false;
  that.data.voice.tip = "已暂停";
  that.data.voice.playing = false;
  that.setData({
    voice: that.data.voice
  })
})

// 播放进度更新事件
innerAudioContext.onTimeUpdate(() => {
  // 计算播放进度百分比
  that.data.voice.progress = Math.round(100 * innerAudioContext.currentTime / innerAudioContext.duration);
  // 格式化当前播放时间
  that.data.voice.time = dateformat(Math.round(innerAudioContext.currentTime));
  // 计算滑块位置
  that.data.voice.margin = Math.round((areaWidth - viewWidth) * (innerAudioContext.currentTime / innerAudioContext.duration));
  console.log('播放进度', innerAudioContext.currentTime + " / " + innerAudioContext.duration);
  that.setData({voice: that.data.voice});
})

// 播放结束事件
innerAudioContext.onEnded(() => {
  console.log("播放结束");
  playing = false;
  that.data.voice.progress = 100;  // 进度设为100%
  that.data.voice.tip = "播放结束";
  that.data.voice.playing = false;
  // 显示总时长
  that.data.voice.time = dateformat(Math.round(innerAudioContext.duration));
  // 滑块移动到最右端
  that.data.voice.margin = Math.round(areaWidth - viewWidth);
  that.setData({
    voice: that.data.voice
  })
})

// 播放错误事件
innerAudioContext.onError((res) => {
  console.log(res.errMsg)
  console.log(res.errCode)
  playing = false;
  that.data.voice.tip = "播放错误"
  that.data.voice.playing = false
  that.setData({voice: that.data.voice})
  // 显示错误提示
  wx.showToast({
    title: '错误:' + res.errMsg,
    icon: "none"
  })
})
},

/**
 * 拖动进度条结束事件
 */
seekTouchEnd: function(e) {
  var that = this;
  // 延迟300ms执行避免界面卡顿
  setTimeout(function() {
    that.setData({
      voice: that.data.voice
    });
    // 跳转到指定播放位置
    innerAudioContext.seek(innerAudioContext.duration * (that.data.voice.progress / 100))
    // 继续播放
    innerAudioContext.play()
  }, 300)
},

/**
 * 拖动进度条事件
 */
voiceSeekMove: function(e) {
  var that = this;
  // 判断是否是触摸事件
  if (e.detail.source === "touch") {
    // 停止当前播放
    innerAudioContext.stop();
    console.log(e);
    if (that.data.voice.canPlay) {
      // 计算拖动进度百分比
      var progress = Math.round(e.detail.x / (areaWidth - viewWidth) * 100);
      that.data.voice.progress = progress;
      // 设置滑块位置
      that.data.voice.margin = e.detail.x;
      // 更新显示时间
      that.data.voice.time = dateformat(Math.round(innerAudioContext.duration * (that.data.voice.progress / 100)));
    }
  }
},

/**
 * 播放/暂停按钮点击事件
 */
voiceClick: function() {
  var playing2 = this.data.voice.playing;
  if (playing2) {
    // 当前正在播放则暂停
    this.pauseMusic();
    innerAudioContext.pause();
  } else {
    // 当前暂停则开始播放
    this.playMusic();
    innerAudioContext.play();
  }
},

/**
 * 封面图点击事件
 */
posterClick: function() {
  // 根据旋转标志判断当前状态
  if (this.data.rotateFlag) {
    // 正在旋转则暂停
    this.pauseMusic();
    innerAudioContext.pause();
  } else {
    // 未旋转则开始播放
    this.playMusic();
    innerAudioContext.play();
  }
},
// 开始播放音乐
playMusic: function() {
  this.setData({
    rotateFlag: true,  // 设置旋转标志为true
  });
},

// 暂停播放音乐
pauseMusic: function() {
  this.setData({
    rotateFlag: false,  // 设置旋转标志为false
  });
},

})

/**
 * 将秒数格式化为时间对象
 * @param {number} second - 总秒数
 * @return {object} 包含天、小时、分钟、秒的对象
 */
function dateformat(second) {
  // 计算天数
  var day = Math.floor(second / (3600 * 24));
  // 计算小时数
  var hour = Math.floor((second - day * 3600 * 24) / 3600);
  // 计算分钟数
  var min = Math.floor((second - day * 3600 * 24 - hour * 3600) / 60);
  // 计算秒数
  var sec = (second - day * 3600 * 24 - hour * 3600 - min * 60);

  return {
    'day': day,
    'hour': p(hour),  // 格式化小时
    'min': p(min),    // 格式化分钟
    'sec': p(sec)     // 格式化秒
  }
}

/**
 * 数字补零函数
 * @param {number} s - 需要格式化的数字
 * @return {string} 格式化后的字符串(小于10补零)
 */
function p(s) {
  return s < 10 ? '0' + s : s;
}





















